<template>

  <div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
      <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
          <!-- <div class="search-s page-public-s" style="box-sizing: border-box;">
              <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                  <el-form class="box-f" ref="queryForm" :inline="true">
                      <el-form-item :label="$t('hTkXzXbiKenNnstx0jyRh')">
                          <el-select 
                              v-model="searchVal" 
                              filterable 
                              class="m-2" 
                              :placeholder="$t('ghkywjdkTueKnFxV5eh3U')" 
                              @change="searchChange"
                              popper-class="set-select"
                              :popper-append-to-body="false"
                          >
                              <el-option
                                  v-for="item in searchOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                              />
                          </el-select>
                      </el-form-item>
                      <el-form-item>
                          <template v-if="searchVal === '1'">
                              <el-input v-model="transferVal" :placeholder="$t('tteaYiqDmWkecFn5Gbqw0')" />
                          </template>
                          
                          <template v-else-if="searchVal === '2'">
                              <el-input v-model="transferVal" :placeholder="$t('ewkoki8VowPt3gvZnrIhO')" />
                          </template>
                          
                          <template v-else>
                              <el-select 
                                  v-model="transferVal" 
                                  filterable 
                                  class="m-2" 
                                  :placeholder="$t('hJaRd3oPbqOqxQHyIPoM')" 
                                  @change="acquireChange"
                                  value-key="id"
                                  popper-class="set-select"
                                  :popper-append-to-body="false"
                              >
                                  <el-option
                                      v-for="item in responsiblePle"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                  />
                              </el-select>
                          </template>
                      </el-form-item>
                      <el-form-item >
                          <el-button @click='searchClick' icon="ele-Search" type="primary"> {{ $t('glYiIwmuhAaVvj1aYfZW') }} </el-button>
                          <el-button  @click="resetClick" icon="ele-Refresh"> {{ $t('sBl0OcdmdxWxDjHxOY5') }} </el-button>
                          <el-button @click="nodeClick('','add')" icon="ele-Plus" type="primary"> {{ $t('9p14sMjLbYvPdwGIiUyy5') }} </el-button>
                          <el-button icon="ele-Download" @click="downClick">{{ $t('sYi7Mf3clSks49qJa_2Q') }}</el-button>
                          <el-upload
                              class="upload-demo"
                              action="#"
                              :auto-upload='false'
                              ref="aModel"
                              :show-file-list="false"
                              :on-change="( file:any ) => { ExcelChange( file , getData ) }"
                              :on-success="onSuccess"
                              :limit="1"
                          >
                              <el-button icon="ele-Upload">{{ $t('1ec5uPhDhD6K2aFDlsEll') }}</el-button>
                          </el-upload>
                          
                      </el-form-item>
                  </el-form>
              </el-card>
          </div> -->

          <div style="box-sizing: border-box;" class="flex-1 pos-r">
              <div class="pos-a w-h-100" style="box-sizing: border-box;">
                  <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                      <div style="" class="w-h-100 ver-flex">
                          <div class="flex-1 pos-r">
                              <div class="pos-a w-h-100">
                                  <div>空间位置</div>

                                  <!-- <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                      <el-table-column type="index" :label="$t('9CxIs0EjWmL9PjyBegweK')" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />
                                      <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_ProvideName" :label="$t('tJ5Fa8CnLg0PhdZakh')"  align="center" />
                                      <el-table-column min-width="100" :show-overflow-tooltip="true" prop="v_BlamePersonnel" :label="$t('q7WhphVZd1Uri84keVlWy')" align="center" />
                                      <el-table-column min-width="100" :show-overflow-tooltip="true" :label="$t('pm6sKeqKLpQ9NbMWtQpj')" align="center">
                                          <template #default="scope">
                                              <span v-if="scope.row.v_Email">{{scope.row.v_Email}}</span>
                                              <span v-else>-</span>
                                          </template>
                                      </el-table-column>
                                      <el-table-column min-width="100" :show-overflow-tooltip="true" :label="$t('ybgSf0GsZeqyBdK01Woq4')" align="center">
                                          <template #default="scope">
                                              <span v-if="scope.row.f_BondMount">{{scope.row.f_BondMount}}</span>
                                              <span v-else>-</span>
                                          </template>
                                      </el-table-column>
                                      <el-table-column min-width="100" :show-overflow-tooltip="true" :label="$t('o5g4ErBjr49Stmd8CKmOm')" align="center">
                                          <template #default="scope">
                                              <span v-if="scope.row.n_Score">{{scope.row.n_Score}}</span>
                                              <span v-else>-</span>
                                          </template>
                                      </el-table-column>
                                      <el-table-column min-width="100" :show-overflow-tooltip="true" :label="$t('uVvU9zhJ3Rnupy3pXaWw')" align="center">
                                          <template #default="scope">
                                              <span v-if="scope.row.n_isValid === 1" style="color: #07AAF9;">{{ $t('3SxBgeR2ljqStjf9bhYmw') }}</span>
                                              <span v-else style="color: #FF5F33;">{{ $t('7wdw58KVsR1BjCq2Jso9') }}</span>
                                          </template>
                                      </el-table-column>
                                      <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('v41AFgb8B4VxiIfApJpnS')" align="center">
                                          <template #default="scope">
                                              <span v-if="scope.row.v_Remake">{{scope.row.v_Remake}}</span>
                                              <span v-else>-</span>
                                          </template>
                                      </el-table-column>

                                      <el-table-column prop="createdTime" min-width="160" :show-overflow-tooltip="true" :label="$t('cCbxa3O9cqIlRbP16l6lj')"  align="center" />
                                      <el-table-column prop="createdUserName" min-width="160" :show-overflow-tooltip="true" :label="$t('3aOcDpaVcxUcoljhyUmd')"  align="center" />
                                      <el-table-column prop="updatedTime" min-width="160" :formatter="otherData" :show-overflow-tooltip="true" :label="$t('p89NovJr3trQIeVrLq8bY')"  align="center" />
                                      <el-table-column prop="updatedUserName" min-width="160" :formatter="otherData" :show-overflow-tooltip="true" :label="$t('tol6GJaSesrLGwpeqa5un')"  align="center" />

                                      <el-table-column min-width="180" :label="$t('qNuJ1BpqhakfykxAewQs')" align="center" fixed="right">
                                          <template #default="scope">
                                              <div class="operate-s">
                                                  <el-button @click="nodeClick(scope.row,'edit')" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('zTcwDh1bIzaHVwfcMokqN') }} </el-button>
                                                  <el-button @click="deleteHandle(scope.row.n_Id , getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger"> {{ $t('f3_0k3AEfFRomRq5Wdik') }} </el-button>
                                              </div>
                                          </template>
                                      </el-table-column>
                                  </el-table> -->
                              </div>
                          </div>
                          <!-- <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
              <el-pagination
                v-model:currentPage="pageNo"
                v-model:page-size="pageSize"
                :total="totalRows"
                :page-sizes="[10, 20, 50, 100]"
                small
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                class="w-h-100"
              />
            </div> -->
                      </div>
                  </el-card>
              </div>
          </div>
      </div>
      <!-- <add-edit-friend-merchant-manage
          :repairInfo="repairInfo"
          :cliSta="cliSta"
          :isUseDialog="isUseDialog"
          @updateData="getData"
          @cancelUseClick="cancelUseClick"
          @controlUseClick="controlUseClick"
      /> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import getTableData from '/@/utils/getTableData';
// import { ProviderQueryPageList , ProviderDelete , UploadBatchImportData } from '/@/api/centerControl/oms';
// import AddEditFriendMerchantManage from './component/add-edit-friend-merchant-manage.vue';
import { ElMessageBox , ElMessage } from 'element-plus';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

export default defineComponent( {
  name: 'friend-merchant-manage',
  components: {
      // AddEditFriendMerchantManage,
  },
  setup(props){
      const { proxy } = useCurrentInstance();
      const $t = proxy.$t;

      const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
      const repairInfo = ref() // 传递子组件数据
      const searchVal = ref('1')
      const transferVal = ref() // 需要查询的值
      const projectNam = ref() // 友商名称数据
      const cliSta = ref() // 当前用户点击的状态 新增/编辑
      let searchName = '1'
      let searchObj:any = reactive({})
      const aModel:Ref = ref(null)
      const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址

      /*** 截取日期格式方法 */
      const otherData = (row:any, column:any) => {
        // 获取单元格数据
        let data = row[column.property]
        if(data == null) {
          return '-'
        }else{
          return data
        }
      }

      /*** 截取日期格式方法 */
      const formatDate = (row:any, column:any) => {
        // 获取单元格数据
        let data = row[column.property]
        if(data == null) {
            return null
        }
        let dt = new Date(data)
        let month = (dt.getMonth() + 1) < 10 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)
        let date = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()
        return dt.getFullYear() + '-' + month + '-' + date
      }

      /*** resetFun */
      const resetFun = () => {
          let newObj = Object.keys(searchObj)
          if(newObj.length !== 0){
              newObj.map((i:any) => {
                  searchObj[i] = ''
              })
          }
      }

      /*** 搜索类型选择事件 searchChange */
      const searchChange = (val:any) => {
          searchName = val
          transferVal.value = ''
      }

      /*** acquireChange 搜索下拉框选择的数据 ---- 传给接口数据 */
      const acquireChange = (val:any) => {
          console.log(val)
      }

      /*** searchClick 查询按钮 */
      const searchClick = () => {
          resetFun()
          if(searchName === '1'){ searchObj.v_ProvideName = transferVal.value }
          if(searchName === '2'){ searchObj.v_BlamePersonnel = transferVal.value }
          if(searchName === '3'){ searchObj.n_isValid = transferVal.value }
      }

      /*** resetClick 重置按钮 */
      const resetClick = () => {
          searchVal.value = '1'
          transferVal.value = ''
          resetFun()
      }

      /*** nodeClick 新增/编辑点击事件 */
      const nodeClick = (val:string | object , am:string) => {
          cliSta.value = am
          val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
          isUseDialog.value = true
      }

      /*** deleteHandle 删除数据事件 */
      // const deleteHandle = async (val: String | Number , updateFun: Function) => {
      //     ElMessageBox.confirm($t('ps5xm1Fk4H9FduSi7ljhW'),$t('imXkp2fMe2jXax1e9yR91'),
      //         {
      //             confirmButtonText: $t('vs4icKxkP7sr74uXwUoxR'),
      //             cancelButtonText: $t('tbKfNeTsqNeN8UaxlQlQm'),
      //             type: 'warning',
      //         }
      //     )
      //     .then(async() => {
      //         let param = {n_Id : val}
      //         try {
      //             let res:any = await ProviderDelete(param)
      //             if(res.success){
      //                 updateFun()
      //             }
      //         } catch (err) { return }
      //     })
      //     .catch(() => {
      //         ElMessage({
      //             type: 'info',
      //             message: $t('oWdtapHuvktLiQJySdnJx'),
      //         })
      //     })
      // }

      /*** cancelUseClick 取消事件 */
      const cancelUseClick = () => {
          isUseDialog.value = false
      }

      /*** controlUseClick 提交事件 */
      const controlUseClick = () => {
          isUseDialog.value = false
      }

      /*** downClick 下载模板 */
      const downClick = () => {
          // window.location.href = 'www.baidu.com' // 覆盖当前页
          // window.open('www.baidu.com','_blank') // 打开新页面
          window.open(toRaw(pathData.value) + 'Upload/SMS/Batch/ProvideInfo.xlsx','_blank') // 打开新页面
      }

      /*** ExcelChange 导入Excel */
      // const ExcelChange = (item:any , updateFun: Function) => {
      //     let reader = new FileReader()
      //     reader.readAsDataURL(item.raw)
      //     reader.onload = (e:any) => {
      //         let base64String = e.target.result;
      //         let param:any = new Object()
      //         param.ModelType = 'ProvideInfo'
      //         param.FileContent = base64String
      //         uploadFun(param , updateFun)
      //     }
      // }
      /*** uploadFun 批量导入数据接口 */
      // const uploadFun = async (p: Object , updateFun: Function) => {
      //     aModel.value.clearFiles()
      //     let res:any = await UploadBatchImportData(p)
      //     if(res.success) updateFun() 
      // }

      /*** onSuccess 文件上传成功时的钩子函数 */
      const onSuccess = (item:any) => {
          console.log(item,'item')
      }

      onMounted(() => {
          // console.log(JSON.parse(window.localStorage.getItem('themeConfig')).isIsDark,'getItem')
      })

      return {
          // ...getTableData(ProviderQueryPageList,{},searchObj),
          isUseDialog,
          cancelUseClick,
          controlUseClick,
          nodeClick,
          repairInfo,
          cliSta,
          // deleteHandle,
          resetClick,
          searchClick,
          downClick, // 下载模板
          // ExcelChange, // 导入Excel
          onSuccess,
          aModel,

          searchOptions: [{
              value: '1',
              label: $t('op5qNFyU3UnzxUbDvRz')
          }, {
              value: '2',
              label: $t('wr5AdprmY0t945egupnZh')
          }, {
              value: '3',
              label: $t('deoyGe96Zio70RlZqjao')
          }], // 搜索方式
          searchVal,
          searchChange,
          transferVal,
          acquireChange,
          projectNam, // 友商名称数据
          responsiblePle: [
              {label: $t('wpGcZAhKNjTxib9Vxupg3') , value: 1},
              {label: $t('awjl9X0klrf6Dn6pDzK0B') , value: 2},
          ], // 友商编号数据
          otherData,
          pathData,
      }
  },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
  #friend-merchant-manage {
      .box-f{
          :deep(.el-form-item__label){
              padding: 0;
          }
      }
      :deep(.el-card__body) {
          height: 100%;
      }
      :deep(.el-card){
          border: none !important;
      }
      .upload-demo{
          margin-left: 12px;
          margin-top: 2px;
      }
      ul {

          list-style: none;

          li {
              cursor: pointer;

              &:hover {
                  color: red;
              }
          }
      }
      .icon-e{
          :deep(.el-icon){
              margin-right: 0px!important;
          }
      }
  }
</style>